<template>
  <div v-loading="loading">
    <h3>使用el组件的案例</h3>
    <el-table :data="dataSource" :border="true" :highlight-current-row="true">
      <el-table-column
        v-for="(item, index) in columns"
        :label="item.label"
        :prop="item.prop"
        :type="item.type"
        :key="index"
        :width="item.width"
        :align="item.align"
      >
        <template #default="scope" v-if="item.prop === 'status'">
          <Badge align="center" type="success" :title="scope.row.status" />
        </template>
      </el-table-column>
    </el-table>
    <div class="table_pagination">
      <el-pagination
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[10, 20, 30]"
        :small="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
      />
    </div>
  </div>
</template>
<script setup lang="ts" name="tableDemo">
import { getClientUserList } from '@/api'
import { reactive, ref, watch } from 'vue'
const loading = ref(false)
const params = reactive({
  pageNum: 1,
  pageSize: 10,
})
const totalPage = ref(0)
const dataSource = ref<any>([])
const columns: any[] = [
  { type: 'index', label: '序号', width: 80 },
  { prop: 'id', label: 'id' },
  { prop: 'name', label: '姓名' },
  { prop: 'phoneNum', label: '手机号', align: 'center' },
  { prop: 'status', label: '会员等级', align: 'center' },
]
const queryHandle = async (p: any) => {
  loading.value = true
  const res = await getClientUserList(p)
  const { code, data } = res
  if (code === 200) {
    const { records, total } = data
    dataSource.value = records
    totalPage.value = total
  }
  console.log('data', dataSource)
  loading.value = false
}
queryHandle(params)
watch(
  () => params,
  () => {
    queryHandle(params)
  },
  { deep: true },
)
</script>
<style lang="scss" scoped>
.table_pagination {
  float: right;
  margin-top: 10px;
}
</style>
